<script setup lang="ts">
import { ref } from 'vue'
import DoctorCard from './DoctorCard.vue'
import type { DoctorList, DoctorParams } from '@/types/consult'
import { getDoctorList } from '@/services/consult'
// import { onMounted, onUnmounted } from 'vue'
// 轮播图滑块的宽度设置问题：宽度设置不会随着视口的宽度改变而进行改变
// 解决方案的核心：滑块的宽度设置要根据视口宽度进行等比例缩放
// 解决方案一：使用原生的监听视口的缩放行为，得到缩放后的视口宽度，然后手动计算滑块的宽度
/* const width = ref(0)
// 375  150
// 320  150/375*320
// ？   150/375*视口的宽度|高度
onMounted(() => {
  changeWidth()
  window.addEventListener('resize', changeWidth)
})

function changeWidth() {
  // 获取视口的宽度
  const innerWidth = window.innerWidth
  width.value = 150 / 375 * innerWidth
}
onUnmounted(() => {
  window.removeEventListener('resize', changeWidth)
}) */
// 解决方案二：使用@vueuse/core这个基于组合api编写的一些钩子函数来实现

import { useWindowSize } from '@vueuse/core'
import { onMounted } from 'vue';
// 实时的监听视口的改变而得到视口的宽度和高度
const { width } = useWindowSize()


// 获取关注医生列表
const list = ref<DoctorList>([])
const params: DoctorParams = {
  current: 1,
  pageSize: 5
}
onMounted(async () => {
  const { data } = await getDoctorList(params)
  list.value = data.rows
})



</script>

<template>
  <div class="follow-doctor">
    <div className="head">
      <p>推荐关注</p>
      <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
    </div>
    <div class="body">
      <!-- swipe 组件 -->
      <van-swipe :width="150 / 375 * width" :show-indicators="false">
        <van-swipe-item v-for="item in list" :key="item.id">
          <!-- 单个医生的信息 -->
          <doctor-card :item="item"></doctor-card>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
  background-color: var(--cp-bg);
  height: 250px;

  .head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 15px;
    font-size: 13px;

    >a {
      color: var(--cp-tip);
    }
  }

  .body {
    width: 100%;
    overflow: hidden;
  }
}
</style>